<template>
  <div id="myChart" class="chart mt20" ref="chartRef"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {    
      myChart: null,
    };
  },
  props: {
    chartData: Object,
  },
  mounted() {
    // 监听窗口变化
    window.addEventListener("resize", this.getResize);
    // 方式一：等到父组件中数据请求成功再拿出来渲染
    // this.renderLine(this.chartData);
  },
  // 切换页面，销毁监听窗口
  destroyed() {
    window.removeEventListener("resize", this.getResize);
  },
//   
  watch:{
    // 方式二:使用侦听器，数据变化会自动渲染
   chartData(){
    this.renderLine(this.chartData);
   }
  },
  methods: {
    // 封装Echarats
    renderLine(obj) {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.chartRef);
      this.myChart.setOption({
        title: {
          text: "订单统计",
          top: 15,
          left: 15,
        },
        // 鼠标放到数据上面提示信息
        tooltip: {
          trigger: "axis",
        },
        // 图例
        legend: {
          top: 10,
        },
        // 图标位置设置
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        // 下载按钮
    //     // toolbox: {
    //     //   feature: {
    //     //     saveAsImage: {},
    //     //   },
    //     // },
        xAxis: {
          type: "category",
          data: obj.orderTime||obj.xData,
        },
        yAxis: {
          type: "value",
        },
        series: obj.series,
        // series: [
        //   {
        //     data: orderAmount,
        //     type: "line",
        //     smooth: true,
        //   },
        // ],
      });
    },
    // Echarts也有一个resize方法，可以监听窗口变化
    getResize() {
      this.myChart && this.myChart.resize();
    },
  },
};
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 500px;
  background-color: #fff;
}
</style>